© 2024. All rights reserved.

Resource Hints

在瀏覽器輸入網址並送出後，到底發生了什麼事？

這道題目涵蓋前端技術範圍很廣，很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼，就讓我來檢視一下自己的狀態吧 d(`･∀･)b

November 26, 2018 效能調校關鍵轉譯路徑圖片最佳化轉譯效能你懂JavaScript嗎？你所不知道的JS 加載效能快取 Rendering Performance Critical Rendering Path Resource Hints Web Workers Worker requestAnimationFrame Gzip HTTP Caching Loading Performance You-Dont-Know-JS cache javascript javascript prototype undefined 編碼解碼 encode decode base-64 前端效能系列文 · 留言

從內部來看瀏覽器到底在做什麼？（Inside look at modern web browser）

從內部來看瀏覽器到底在做什麼？

November 10, 2018 效能調校轉譯效能關鍵轉譯路徑 Rendering Performance Critical Rendering Path Lighthouse Resource Hints Web Workers Worker requestAnimationFrame 前端效能系列文 · 留言

Preload vs Prefetch

比較 Preload 與 Prefetch 的異同。

July 31, 2018 Resource Hints 效能調校加載效能圖片最佳化 HTTP Caching Loading Performance Image Optimization 吃什麼前端效能系列文 · 留言

圖片最佳化（Image Optimization）

實作「圖片最佳化（Image Optimization）」的第一個問題是「真的需要這個圖檔嗎？」，去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代，可以做哪些優化？」。

July 30, 2018 圖片最佳化效能調校加載效能 SVG Resource Hints Lighthouse Base64 Images Image Optimization Loading Performance Gzip 編碼解碼 encode decode base-64 前端效能系列文 · 留言

DNS Prefetching：預先做 DNS 解析，幫助網頁載入速度更快

預先做 DNS 解析（domain name resolution），將人類可理解的 domain name，轉為 IP address。瀏覽器載入頁面和資源時需做 DNS 解析，但若等到瀏覽該頁或要下載資源時才做 DNS 解析就太遲了（使用者需要等待一段時間），因此可預先執行。

June 25, 2016 Resource Hints 效能調校前端效能系列文 · 留言